var menu, toolbar, mainPanel, loginWindow, statusBar, selectedReport = 0;

Ext.onReady(function() {
    
    var reportingData = new Ext.data.Store({
        // load using HTTP
        url: siteRoot+'reports/data/',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
            record: 'report',
            id: 'id'
        }, ['id', 'start_time', 'labyrinth'])
    });

    var reportGrid = new Ext.grid.GridPanel({
        title: 'Reports',
        width: 350,
        height: 220,
        store: reportingData,
        enableHdMenu: false,
        columns: [
            {header: 'Start Time', sortable: true, dataIndex: 'start_time'},
            {header: 'Labyrinth', sortable: true, dataIndex: 'labyrinth'}
        ],
        viewConfig: {
            forceFit: true
        },
        region: 'west',
        frame: true,
        margins: '5 0 5 5',
        loadMask: new Ext.LoadMask(Ext.getBody(), {msg:"Retrieving list of reports..."})
    });
 
    var reportDetailPanel = new Ext.Panel({
        id: 'reportDetailPanel',
        title: 'Details',
        bodyCfg: {cls: 'panelBody reportPanel'},
        region: 'center',
        frame: true,
        autoScroll: true,
        margins: '5 5 5 5'
    });

    // Build the application viewport which will house all other components
    viewport = new Ext.Viewport({
        title: 'OpenLabyrinth',
        id: 'viewport',
        layout:'border',
        items: [new Ext.Panel({
            border: false,
            region:'north'
        }), reportGrid, reportDetailPanel]
    });
    
    // define a template to use for the detail view
    var reportTplMarkup = [
        '<h3>Feedback</h3>',
        '<ul id="feedback"></ul>',
        '<div id="charts"></div>'
    ];
    var reportTpl = new Ext.Template(reportTplMarkup);
    
    // Whenever a report is selected, this function updates the details
    // field with the properties of the selected report.
    reportGrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
            
        var reportDetailPanel = Ext.getCmp('reportDetailPanel');
        reportTpl.overwrite(reportDetailPanel.body, r.data);
        selectedReport = r.data.id;
                    
        new Ext.Panel({
            title: 'Time Breakdown',
            frame: true,
            renderTo: 'charts',
            width: 800,
            height: 400,
            layout: 'fit',
            bodyCfg: { id: 'timeBreakdown' }
        });
        
        new Ext.Panel({
            title: 'Counter Trends',
            frame: true,
            renderTo: 'charts',
            width: 800,
            height: 400,
            layout: 'fit',
            bodyCfg: { id: 'counterTrends' }
        });
            
        var timeBreakdownChart = new FusionCharts(siteRoot+'flash/fusioncharts/FCF_Column3D.swf', 'timeBreakdownChart', '788', '366');
        timeBreakdownChart.setDataURL(siteRoot+'report/time/'+selectedReport+'/data/');
        timeBreakdownChart.render('timeBreakdown');
        
        var counterChart = new FusionCharts(siteRoot+'flash/fusioncharts/FCF_MSLine.swf', 'counterChart', '788', '366');
        counterChart.setDataURL(siteRoot+'report/counter/'+selectedReport+'/data/');
        counterChart.render('counterTrends');
    });
    
    // Whenever a report is deselected, this function updates the details
    // field with the properties of the selected report.
    reportGrid.getSelectionModel().on('rowdeselect', function(sm, rowIdx, r) {
        selectedReport = false;
    });
    
    // Draw the application
    viewport.render('pageContent');

    reportingData.load();
});

function displayReport() {

}
